<template>
  <div>
    <el-form inline>
      <el-form-item label="">
        <el-input placeholder="角色名称" v-model="tempSearchObj.roleName"></el-input>
      </el-form-item>
      <!-- 两个按钮 -->
      <el-button type="primary" icon="el-icon-search" @click="check">查询</el-button>
      <el-button @click="clearObj">清空</el-button>
    </el-form>
    <el-button type="primary" @click="addRole">添加</el-button>
    <el-button type="danger" :disabled="selectionIds.length==0" @click="deleteAllRoles">批量删除</el-button>

    <!--  -->
    <el-table style="width: 100%;margin-top:10px" :data="records" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" width="120" type="index" style="text-align:center"> </el-table-column>
      <el-table-column label="角色名称" width>
        <template slot-scope="{row,$index}">
          <template v-if="row.edit">
            <el-input style="width:300px" size="medium" v-model="row.roleName" prop="roleName" @change="updateRole(row)" v-focus></el-input>
            <el-button type="warning" icon="el-icon-refresh" size="medium" style="margin-left:10px" @click="cancel(row)">取消</el-button>
          </template>
          <span v-else>{{row.roleName}}</span>

        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="{row,$index}">
          <el-button type="info" icon="el-icon-info" size="mini" @click="$router.push(`/acl/role/auth/${row.id}?roleName=${row.roleName}`)"></el-button>
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="row.edit = true"></el-button>
          <el-popconfirm confirmButtonText='确定' cancelButtonText='不用了' icon=" el-icon-info" iconColor="red" :title="`你确定要删除${row.roleName}吗?`" @onConfirm="deleteRole(row)" style="margin-left:10px">
            <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top:10px" :total="total" :current-page="page" :page-sizes="[3,5,10]" :page-size="limit" layout="prev,pager,next,jumper,->,sizes,total" @current-change="getRoleList"
      @size-change="handlerSizeChange">
    </el-pagination>

    <!-- 添加角色 -->
    <el-dialog title="添加角色" :visible.sync="dialogVisible" width="40%">
      <el-form>
        <el-form-item label="请输入新名称">
          <el-input v-model="role.roleName" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


export default {
  name: 'Role',
  data () {
    return {
      page: 1,
      limit: 3,
      total: 0,
      tempSearchObj: { // 收集搜索条件数据
        roleName: '',
      },
      searchObj: {
        roleName: ''
      },
      records: [],
      // 控制span和inpu的显示与隐藏
      isShow: true,
      records: [],
      selectionIds: [],
      dialogVisible: false,
      roleName: '',
      role: {
        roleName: ''
      },
    }
  },
  mounted () {
    this.getRoleList()
  },
  methods: {
    async getRoleList (pages = 1) {
      this.page = pages
      const { page, limit, searchObj } = this
      let result = await this.$API.role.reqGetRoles(page, limit, searchObj)
      if (result.code == 20000) {
        console.log(result);
        this.total = result.data.total
        result.data.items.forEach(item => {
          item.edit = false
        });
        this.records = result.data.items
      }
    },
    // 每页展示的数量发生变化时
    handlerSizeChange (limit) {
      this.limit = limit
      this.getRoleList()
    },
    // 离开输入框时 变为span 向服务器发送请求，更新数据
    async updateRole (row) {
      const { id, roleName } = row
      let result = await this.$API.role.reqUpdateRole({ id, roleName })
      if (result.code == 20000) {
        this.$message.success('修改成功')
        row.edit = false
      }
    },
    // 删除单个角色的操作
    async deleteRole (row) {
      let result = await this.$API.role.reqDeleteRole(row.id)
      if (result.code == 20000) {
        this.$message.success('删除成功')
        this.getRoleList(this.page)
      }
    },
    // 点击查询按钮，发起请求
    check () {
      this.searchObj = { ...this.tempSearchObj }
      this.getRoleList()
    },
    // 点击清空按钮，清空表单，重新发请求，渲染表单
    clearObj () {
      this.tempSearchObj = {}
      this.searchObj = { ...this.tempSearchObj }
      this.getRoleList()
    },
    // 统计所有要删除的id
    handleSelectionChange (val) {
      this.selectionIds = val
    },
    // 批量删除按钮的回调
    async deleteAllRoles () {
      const ids = this.selectionIds.map(item => {
        if (item.id) {
          return Number(item.id)
        }
      })
      let result = await this.$API.role.reqDeleteAllRoles(ids)
      // console.log(result);
      if (result.code == 20000) {
        this.$message.success('批量删除成功')
        this.getRoleList()
      }
    },
    // 添加角色按钮
    async addRole () {
      this.dialogVisible = true
    },
    // 点击保存按钮
    async saveRole () {
      this.dialogVisible = false
      let result = await this.$API.role.reqAddRole(this.role)
      if (result.code == 20000) {
        this.$message.success('保存成功')
        this.getRoleList()
      }
    },
    // 
    cancel (row) {
      row.edit = false
      this.$message.warning('取消角色修改')
    },
    // 使文本框变为可编辑状态，且自动聚焦
  },
}
</script>

<style>
</style>